<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>index</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }

    #app {
      width: 800px;
      border: 1px solid #ccc;
      border-radius: 8px;
      margin: 10px auto 0;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div id='app'>
    <el-form ref="form" :model="form" label-width="130px" :rules='rules'>
      <el-form-item :label="item.label" v-for='(item,index) in form.dirPathArr' :key='index'
        :prop="`dirPathArr.${index}.value`">
        <el-input v-model="item.value">
        </el-input>
      </el-form-item>
      <el-form-item label="合并后的工程目录">
        <el-input v-model="form.mergePath">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即合并</el-button>
        <el-button @click="addDomain">新增工程目录</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
  <script>
    const vue = new Vue({
      el: '#app',
      data() {
        return {
          form: {
            dirPathArr: [{
                label: '工程目录1',
                value: 'E:/test/demo1'
              },
              {
                label: '工程目录2',
                value: 'E:/test/demo2'
              },
              {
                label: '工程目录3',
                value: ''
              }
            ],
            mergePath: ''
          },
          rules: {
            name: [{
              required: true,
              message: '请输入活动名称',
              trigger: 'blur'
            }],
          }
        }
      },
      methods: {
        onSubmit() {
          let dirPathArr = []
          this.form.dirPathArr.forEach(item => {
            if (item.value) dirPathArr.push(item.value)
          })
          // 像这种复合对象不建议用formdata的方式提交，建议使用json的方式提交
          this.form.mergePath = ''
          var formData = new FormData();
          formData.append("test", "formdata");
          formData.append("test1", JSON.stringify({
            dd: 'dd'
          }));
          formData.append("dirPathArr", JSON.stringify(dirPathArr));
          $.ajax({
            url: 'http://127.0.0.1:3000/json',
            method: 'post',
            data: JSON.stringify({
              dirPathArr: dirPathArr,
              mergePath: this.form.mergePath
            }),
            contentType: 'application/json',
            success: (data) => {
              console.log('返回的结果数据', data)
              if (data.code == 200) {
                vue.$message({
                  message: data.msg,
                  type: 'success'
                });
                this.form.mergePath = data.value
              } else {
                vue.$message.error(data.msg);
              }
            },
            error: (err) => {
              console.log(err)
            }
          })
          $.ajax({
            url: 'http://127.0.0.1:3000/formData',
            method: 'post',
            data: formData,
            contentType: false,
            processData: false,
            success: (data) => {
              console.log('返回的结果数据', data)
              if (data.code == 200) {
                vue.$message({
                  message: data.msg,
                  type: 'success'
                });
                this.form.mergePath = data.value
              } else {
                vue.$message.error(data.msg);
              }
            },
            error: (err) => {
              console.log(err)
            }
          })
        },
        addDomain() {
          this.form.dirPathArr.push({
            label: '工程目录' + (this.form.dirPathArr.length + 1),
            value: ''
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      }
    })
  </script>
</body>

</html>